<template>
	<view class="c-content">
		<view class="close-box" @click="close">
			<image src="../../static/images/close-01.png"></image>
		</view>
		<view class="c-info">
			<view class="client-img">
				<!-- <image :src="customer_info && customer_info.avatar ? customer_info.avatar : goodsImg" mode="scaleToFill"></image> -->
				<image :src="avatar ? avatar : userDefault" mode="scaleToFill"></image>
			</view>
		</view>
		<view class="comm-list" :style="{height : `calc(100vh - ${boxHeight}px)`}">
			<view class="i-info">
				<view class="i-name" v-if="isShowName && name">{{name}}</view>
				<view class="b-shopname" v-if="isShowCp && company">{{company}}</view>
				<view class="b-phone" v-if="cellphone">{{cellphone}}</view>
			</view>
			<view class="i-a-info">
				<view> 
					<text class="i-title">邮箱地址：</text>
					<text>{{email}}</text>
				</view>
			</view>
			
			<view class="i-b-info">
				<view> 
					<text class="i-title">客户类别：</text>
					<text>{{typeid_name}}</text>
				</view>
				<view> 
					<text class="i-title">默认报价：</text>
					<text>{{price_i_name}}</text>
				</view>
			</view>
			
			<view class="i-b-info">
				<view> 
					<text class="i-title">开放云店：</text>
					<text>{{ydListTitle}}</text>
				</view>
				<!-- <view> 
					<text class="i-title">开放APP：</text>
					<text>{{"已开放"}}</text>
				</view> -->
			</view>
			
			<view class="i-b-info">
				<view> 
					<text class="i-title">经手人：</text>
					<text>{{uid_cp}}</text>
				</view>
				<view> 
					<text class="i-title">客户备注：</text>
					<text class="note">{{remark}}</text>
				</view>
			</view>
			<view class="i-b-info">
				<view> 
					<text class="i-title">来源：</text>
					<text>{{from_name}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import staticConst from "../../js/const/StaticConst.js";
	export default {
		props:["isShowCp","isShowName","avatar","name","company","cellphone","email","typeid_name","price_i_name","ydListTitle","uid_cp","remark","from_name"],
		data() {
			return {
				userDefault:staticConst.DEFAULT_IMG,
				boxHeight:240
			};
		},
		methods:{
			close()
			{
				this.$emit("closeCustomInfo",false);
			},
		}
	}
</script>

<style lang="scss">
	.c-content
	{
		width: 310px;
		height: 100%;
		position: relative;
		background: #F9F9F9;
		padding: 0 0px;
		box-sizing: border-box;
		.close-box
		{
			width: 15px;
			height: 15px;
			position: absolute;
			top:20px;
			right: 20px;
			cursor: pointer;
			image
			{
				width: 100%;
				height: 100%;
			}
		}
			
		.c-info
		{
			width: 100%;
			height: 220px;
			align-items: center;
			justify-content: center;
			display: flex;
			text-align: center;
			padding-top: 20px;
			.client-img
			{
				width: 160px;
				height: 160px;
				border-radius: 50%;
				overflow: hidden;
				image
				{
					width: 100%;
					height: 100%;
				}
			}
		}
		.i-info
		{
			padding-left: 10px;
			padding-right: 10px;
			padding-bottom: 10px;
			border-bottom: 1px solid #ECECEC;
			font-size: 16px;
			.i-name
			{
				text-align: center;
				font-size: 26px;
				font-weight: bold;
				color: #333;
			}
			.b-shopname,.b-phone
			{
				text-align: center;	
				color: #999;
			}	
		}
		
		.i-a-info, .i-b-info, .i-m-info
		{
			// text-align: center;
			padding:10px;
			border-bottom: 1px solid #ECECEC;
			font-size: 16px;
			view
			{
				padding-left: 10px;
				.i-title
				{
					color:#999;
					display: inline-block;
					width: 80px;
					text-align-last:justify;
					text-align:justify;
					text-justify:distribute-all-lines; // 这行必加，兼容ie浏览器
				}
				.note
				{
					color:#999;
					.more
					{
						padding-left: 5px;
						color: #3388FF;
						font-size: 13px;
					}
				}
				text
				{
					color: #333;
				}
				.stock
				{
					color: #3388FF;
				}
			}
		}
	
	}
	
</style>
